@import "mixin";

@charset "UTF-8";
/**
 * 通用样式
 */
$font-42: 42px;
$font-F1: 36px;
$font-F2: 34px;
$font-F3: 30px;
$font-F4: 28px;
$font-F5: 26px;
$font-F6: 24px;
$font-F7: 22px;
$font-F8: 32px;
$color-C1: #282828;
$color-C2: #bbbbbb;
$color-C3: #e6e6e6;
$color-C4: #737373;
$color-C5: #a8a8a8;
$color-C6: #f56d9d;
$color-C7: #f5f5f5;
$color-C8: #FFFFFF;

.mine-customer-topHint {
  width: 100%;
  background: $color-C8;
  @include px2rem(font-size, $font-F7);
  color: $color-C4;
  box-sizing: border-box;
  text-align: center;
  @include px2rem(padding-left, 32px);
  @include px2rem(padding-right, 32px);
  @include px2rem(margin-top, 20px);
  @include px2rem(padding-top, 10px);
  @include px2rem(padding-bottom, 10px);

  border-top: solid $color-C3 1px;
  border-bottom: solid $color-C3 1px;
}

.mine-customer-item {

  box-sizing: border-box;
  @include px2rem(height, 276px);
  @include px2rem(margin-top, 20px);
  margin-bottom: 0px;
  border-top: solid $color-C3 1px;
  border-bottom: solid $color-C3 1px;
  background: $color-C8;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}

.mine-customer-item-left {
  @include px2rem(width, 491px);
  @include px2rem(margin-left, 40px);
  box-sizing: border-box;
  flex-basis: auto;
}

.mine-customer-item-left-top {
  border-bottom: solid $color-C3 1px;
  @include px2rem(height, 154px);
  box-sizing: border-box;
}

.mine-customer-item-right {
  @include px2rem(width, 204px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mine-customer-item-right img {
  @include px2rem(width, 142px);
  @include px2rem(height, 52px);
  @include px2rem(margin-top, 10px);
}

.mine-customer-portrait {
  border-radius: 50%;
  @include px2rem(height, 80px);
  @include px2rem(width, 80px);
  @include px2rem(margin-top, 44px);
  @include px2rem(margin-right, 16px);
  box-sizing: border-box;
}

.mine-customer-information {
  @include px2rem(margin-top, 40px);
  @include px2rem(width, 395px);
  color: $color-C1;
  @include px2rem(font-size, $font-F8);
  font-weight: bold;
}

.mine-customer-information h2 {
  color: $color-C1;
  @include px2rem(font-size, $font-F6);
  @include px2rem(margin-top, 15px);
  font-weight: normal;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.mine-customer-informationPadding {
  @include px2rem(margin-left, 10px);
}

.mine-customer-item-left-bottom {
  @include px2rem(height, 118px);
  @include px2rem(font-size, $font-F6);
  color: $color-C4;
  box-sizing: border-box;
}

.mine-customer-descriptionLayout {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  @include px2rem(height, 118px);
}

.mine-customer-editDescription {

}

.mine-customer-description {

}

.mine-customer-description div {
  box-sizing: border-box;
  @include px2rem(padding-right, 32px);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mine-customer-mine-arrow {
  @include px2rem(width, 10px);
  @include px2rem(height, 19px);
  box-sizing: border-box

}

.mine-customer-customer-dot {
  @include px2rem(height, 8px);
  @include px2rem(width, 8px);
  @include px2rem(border-radius, 4px);
  @include px2rem(margin-bottom, 5px);
  background: $color-C5;
}

